<template>
  <div class="file-center">
    <!-- 筛选区 -->
    <el-form :model="filter" inline class="filter-bar">
      <!-- 文件名/单据编号 -->
      <el-form-item label="文件名称/单据编号">
        <el-input
          v-model="filter.searchKey"
          placeholder="请输入文件名称/单据编号"
          clearable
          style="width: 220px"
        />
      </el-form-item>

      <!-- 上传时间 -->
      <el-form-item label="上传时间">
        <el-date-picker
          v-model="filter.uploadTime"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          :default-value="[new Date('2025-06-20'), new Date('2025-06-26')]"
        />
      </el-form-item>

      <!-- 上传人（多选下拉 + 全选） -->
      <el-form-item label="上传人">
        <el-popover trigger="click" placement="bottom-start" width="260px">
          <template #reference>
            <el-select
              v-model="filter.uploadersDisplay"
              multiple
              collapse-tags
              placeholder="请选择"
              style="width: 160px"
              disabled
            />
          </template>
          <el-checkbox-group v-model="filter.uploaders">
            <el-checkbox
              :label="option"
              v-for="option in uploaderOptions"
              :key="option"
            />
            <div class="check-all">
              <el-checkbox
                :indeterminate="
                  isIndeterminate(filter.uploaders, uploaderOptions)
                "
                :checked="isAllChecked(filter.uploaders, uploaderOptions)"
                @change="handleCheckAll('uploaders', $event)"
                >全选</el-checkbox
              >
            </div>
          </el-checkbox-group>
        </el-popover>
      </el-form-item>

      <!-- 文件后缀（多选下拉 + 全选） -->
      <el-form-item label="文件后缀">
        <el-popover trigger="click" placement="bottom-start" width="260px">
          <template #reference>
            <el-select
              v-model="filter.fileExtsDisplay"
              multiple
              collapse-tags
              placeholder="请选择"
              style="width: 160px"
              disabled
            />
          </template>
          <el-checkbox-group v-model="filter.fileExts">
            <el-checkbox
              :label="option"
              v-for="option in fileExtOptions"
              :key="option"
            />
            <div class="check-all">
              <el-checkbox
                :indeterminate="
                  isIndeterminate(filter.fileExts, fileExtOptions)
                "
                :checked="isAllChecked(filter.fileExts, fileExtOptions)"
                @change="handleCheckAll('fileExts', $event)"
                >全选</el-checkbox
              >
            </div>
          </el-checkbox-group>
        </el-popover>
      </el-form-item>

      <!-- 关联单据（多选下拉 + 全选） -->
      <el-form-item label="关联单据">
        <el-popover trigger="click" placement="bottom-start" width="260px">
          <template #reference>
            <el-select
              v-model="filter.relatedBillsDisplay"
              multiple
              collapse-tags
              placeholder="请选择"
              style="width: 160px"
              disabled
            />
          </template>
          <el-checkbox-group v-model="filter.relatedBills">
            <el-checkbox
              :label="option"
              v-for="option in relatedBillOptions"
              :key="option"
            />
            <div class="check-all">
              <el-checkbox
                :indeterminate="
                  isIndeterminate(filter.relatedBills, relatedBillOptions)
                "
                :checked="isAllChecked(filter.relatedBills, relatedBillOptions)"
                @change="handleCheckAll('relatedBills', $event)"
                >全选</el-checkbox
              >
            </div>
          </el-checkbox-group>
        </el-popover>
      </el-form-item>

      <!-- 仅显示未关联单据 -->
      <el-form-item>
        <el-checkbox v-model="filter.showUnrelated"
          >仅显示未关联单据文件</el-checkbox
        >
      </el-form-item>

      <!-- 查询 & 重置 -->
      <el-form-item>
        <el-button type="primary" @click="queryData">查询</el-button>
        <el-button @click="resetFilter" style="margin-left: 8px"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <!-- 操作栏 -->
    <div class="action-bar">
      <el-button type="success">导入</el-button>
      <el-dropdown>
        <el-button type="primary">
          生成单据 <i class="el-icon-arrow-down"></i>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="item in relatedBillOptions" :key="item">{{
              item
            }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-button type="info" style="margin-left: 8px">下载</el-button>
      <el-button type="danger" style="margin-left: 8px">删除</el-button>
    </div>

    <!-- 文件列表 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%; margin-top: 16px"
      :header-cell-style="{ background: '#F8F9FA' }"
    >
      <el-table-column type="selection" width="50" />
      <el-table-column prop="name" label="文件名称" min-width="140" />
      <el-table-column prop="relatedBill" label="关联单据" min-width="120" />
      <el-table-column prop="billCode" label="单据编码" min-width="120" />
      <el-table-column prop="uploader" label="上传人" min-width="100" />
      <el-table-column
        prop="size"
        label="文件大小"
        min-width="100"
        align="right"
      />
      <el-table-column prop="uploadTime" label="上传时间" min-width="160" />
      <el-table-column prop="remark" label="备注" min-width="120" />
    </el-table>

    <!-- 空状态 -->
    <div class="empty-state" v-if="tableData.length === 0">
      <i class="el-icon-document" style="font-size: 48px; color: #dcdcdc"></i>
      <p>暂无数据</p>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from "vue";
import { ElMessage } from "element-plus";

// ========== 筛选条件 ==========
const filter = reactive({
  searchKey: "", // 文件名称/单据编号
  uploadTime: [new Date("2025-06-20"), new Date("2025-06-26")], // 上传时间
  uploaders: [], // 选中的上传人（数组）
  uploadersDisplay: "", // 上传人显示值（用于Select展示）
  fileExts: [], // 选中的文件后缀（数组）
  fileExtsDisplay: "", // 文件后缀显示值
  relatedBills: [], // 选中的关联单据（数组）
  relatedBillsDisplay: "", // 关联单据显示值
  showUnrelated: false, // 仅显示未关联单据
});

// ========== 模拟选项数据 ==========
const uploaderOptions = [
  "Michael Li",
  "陈宝贤",
  "桂彩兰",
  "销售部01",
  "lkhgr002",
  "陈拱彬",
  "张和林",
];
const fileExtOptions = [
  "jpg",
  "jpeg",
  "gif",
  "png",
  "bmp",
  "txt",
  "doc",
  "docx",
  "xls",
  "xlsx",
  "pdf",
];
const relatedBillOptions = [
  "销货订单",
  "销货单",
  "销货退货单",
  "购货订单",
  "购货单",
  "购货退货单",
  "调拨单",
  "其他入库单",
  "其他出库单",
  "成本调整单",
];

// ========== 全选逻辑 ==========
/** 更新显示值（选中项变化时同步） */
const updateDisplay = (field) => {
  filter[`${field}Display`] = filter[field].join(", ");
};

// 监听选中项变化，更新显示值
["uploaders", "fileExts", "relatedBills"].forEach((field) => {
  watch(
    () => filter[field],
    () => {
      updateDisplay(field);
    }
  );
});

/** 判断是否部分选中 */
const isIndeterminate = (selected, all) => {
  return selected.length > 0 && selected.length < all.length;
};

/** 判断是否全选 */
const isAllChecked = (selected, all) => {
  return selected.length === all.length;
};

/** 全选/取消全选 */
const handleCheckAll = (field, isCheckAll) => {
  const allOptions = {
    uploaders: uploaderOptions,
    fileExts: fileExtOptions,
    relatedBills: relatedBillOptions,
  }[field];

  filter[field] = isCheckAll ? [...allOptions] : [];
};

// ========== 表格数据 ==========
const tableData = ref([]);

// ========== 交互逻辑 ==========
/** 查询数据（模拟） */
const queryData = () => {
  // 此处可扩展真实接口请求，目前模拟空数据
  tableData.value = [];
  ElMessage.info("查询完成（模拟）");
};

/** 重置筛选条件 */
const resetFilter = () => {
  filter.searchKey = "";
  filter.uploadTime = [new Date("2025-06-20"), new Date("2025-06-26")];
  filter.uploaders = [];
  filter.uploadersDisplay = "";
  filter.fileExts = [];
  filter.fileExtsDisplay = "";
  filter.relatedBills = [];
  filter.relatedBillsDisplay = "";
  filter.showUnrelated = false;
  ElMessage.info("筛选条件已重置");
};
</script>

<style scoped>
.file-center {
  padding: 24px;
  background: #fff;
}

.filter-bar {
  margin-bottom: 16px;
}

.action-bar {
  margin: 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0;
  color: #999;
}

/* 全选区域样式 */
.check-all {
  padding: 8px;
  text-align: center;
  border-top: 1px solid #ebeef5;
  margin-top: 8px;
}
</style>